<template>
  <div class="dayin">
    <!-- <el-button type="primary" @click="print()" class="dayin_btn"
      >打印预览</el-button
    > -->
    <el-popconfirm
      confirm-button-text="好的"
      cancel-button-text="不用了"
      icon-color="red"
      title="是否将此订单设置为待发货？"
      @confirm="set_DeliveryStatus"
    >
      <el-button  type="primary" slot="reference" style="margin-bottom: 10px;"> 打印预览</el-button>
    </el-popconfirm>
    <div ref="print" id="printArea">
      <div v-for="(item, index) in dayinlist" :key="index">
        <table border="0">
          <thead>
            <tr>
              <th colspan="6">
                <!-- {{ company_name}}的出库单 -->
                {{Infomation}}送货单
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td width="100">客户</td>
              <td colspan="2">{{ item.order.customer.customer_name }}</td>
              <td width="80">单号</td>
              <td colspan="2">{{ item.order.order_num }}</td>
            </tr>
            <tr>
              <td width="100">收货地址</td>
              <td width="150">{{ item.order.customer.customer_address }}</td>
              <td width="100">联系电话</td>
              <td width="200">{{ item.order.customer.contact_phone }}</td>
              <td width="80">日期</td>
              <td width="250">{{ strDate }}</td>
            </tr>
            <tr>
              <td width="100">物流</td>
              <td colspan="2"></td>
              <td width="80">承运物流</td>
              <td colspan="2"></td>
            </tr>
            <tr>
              <td width="100">型号</td>
              <td width="100">规格</td>
              <td width="100">颜色</td>
              <td width="80">数量</td>
              <td width="80">单位</td>
              <td width="100">客户要求（备注）</td>
            </tr>
            <tr>
              <td>  {{item.order.product_name.product_name}} [{{ item.order.model_number_name.model_number }}]</td>
              <td>{{ item.order.specification?item.order.specification.specification:'' }}</td>
              <td>{{ item.order.color?item.order.color.color:'' }}</td>
              <td>{{ item.num }}</td>
              <td>件</td>
              <td>{{ item.order.remark }}</td>
            </tr>
            <tr>
              <td>合计</td>
              <td colspan="5"></td>
            </tr>
            <tr>
              <td>发送配件</td>
              <td colspan="5">Infomation</td>
            </tr>
            <tr>
              <td colspan="2"></td>
              <td></td>
              <td></td>
              <td colspan="2"></td>
            </tr>
          </tbody>
        </table>
        <div style="page-break-after: always"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {  setDeliveryStatus} from "@/api/product/index"
export default {
  data() {
    return {
      dayinlist: [],
      strDate: "",
      Infomation:''
    };
  },
  mounted() {
    this.dayinlist = JSON.parse(this.$route.query.data);
    this.Infomation=this.$store.getters.Infomation.company_name
    this.currentTime();
  },
  methods: {
    set_DeliveryStatus() {
      let ids_s = [];
      this.dayinlist.forEach((item) => {
        ids_s.push(item.id);
      });
      setDeliveryStatus({ ids: ids_s }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "操作成功",
          });
          this.print();
        }
      });
    },
    /**
     * 获取当前时间
     */
    currentTime() {
      var date = new Date();
      var year = date.getFullYear(); //月份从0~11，所以加一
      let month = date.getMonth();
      console.log("month", month);
      var dateArr = [
        date.getMonth() + 1,
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
      ];
      //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
      for (var i = 0; i < dateArr.length; i++) {
        if (dateArr[i] >= 1 && dateArr[i] <= 9) {
          dateArr[i] = "0" + dateArr[i];
        }
      }
      this.strDate =
        year +
        "/" +
        dateArr[0] +
        "/" +
        dateArr[1] +
        " " +
        dateArr[2] +
        ":" +
        dateArr[3] +
        ":" +
        dateArr[4];
    },
    print() {
      this.$print(this.$refs.print);
    },
  },
};
</script>
<style scoped>
.dayin {
  padding: 25px;
  box-sizing: border-box;
}

#printArea {
  width: 100%;
  margin: 0 auto;
}

#printArea > div {
  margin-top: 50px;
}
#printArea > div:first-child {
  margin-top: 0px;
}
#printArea table {
  width: 100%;
  border-collapse: collapse;
}
#printArea table th {
  color: #333;
  padding: 5px 0;
  font-size: 26px;
}
#printArea table {
  border: 1px solid #c5c5c5;
}
#printArea table td,
table th {
  border: 1px solid #c5c5c5;
  text-align: center;
  padding: 0;
  margin: 0;
}

#printArea table tr td {
  height: 35px;
  line-height: 35px;
}
/* #printArea table thead th {
  background-color: #0a8fa1;
} */

#printArea table tr th,
table tr td {
  padding: 5px 12px;
}

@page {
  size: auto; /* auto is the initial value */
  margin: 3mm; /* this affects the margin in the printer settings */
}
.procedure {
  word-wrap: break-word;
}

.dayin_btn {
  background: #0a8fa1;
  border: none;
  margin: 20px 0;
}
</style>
